@charset "utf-8";
@import "common/reset";
@function r($px) {
    @return $px/100*1rem;
}

$color:#ff9344;
.web {
    width: 100%;
    position: relative;
    height: 100%;
    overflow: hidden;
    header {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        padding: r(34) 0 r(20);
        .csf_header_left {
            font-size: r(26);
            width: r(124);
            height: r(66);
            margin-top: r(30);
            margin-left: r(24);
            button {
                width: 100%;
                height: 100%;
                line-height: r(58);
                background-color: transparent;
                border: 1px solid $color;
                border-radius: r(16);
                font-size: r(32);
            }
        }
        .header_tit {
            width: r(120);
            margin-left: auto;
            margin-right: auto;
            margin-top: r(48);
            font-size: r(26);
            text-align: center;
        }
        .header_left {
            width: r(123);
            height: r(123);
            margin-left: r(23);
            a {
                display: block;
                img {
                    width: 100%;
                }
            }
        }
        .header_right {
            width: r(163);
            height: r(69);
            margin-right: r(21);
            margin-top: r(30);
            border: r(3) solid $color;
            position: relative;
            &::after {
                content: "";
                width: 0;
                height: 0;
                border-top: r(16) solid $color;
                border-left: r(15) solid transparent;
                border-right: r(15) solid transparent;
                position: absolute;
                right: r(14);
                top: r(25);
            }
            select {
                width: 100%;
                height: 100%;
                position: absolute;
                border: none;
                font-size: r(26);
                padding-left: r(14);
                -webkit-appearance: none;
            }
        }
        .header_center {
            margin-top: r(36);
            form {
                z-index: 1;
                position: relative;
                width: r(270);
                height: r(56);
                margin-left: auto;
                margin-right: auto;
                border-radius: r(28);
                border: r(1) solid $color;
                padding-left: r(20);
                .main {
                    position: absolute;
                    background-color: transparent;
                }
                .main:focus {
                    outline: none;
                }
                .icon-holder {
                    z-index: 1;
                    position: absolute;
                    width: r(270);
                    justify-content: space-around;
                    bottom: r(-60);
                    left: r(10);
                }
                .icon {
                    font-size: r(32);
                    position: relative;
                    float: left;
                    height: r(50);
                    width: r(50);
                    background: $color;
                    border-radius: 100%;
                    box-shadow: 0 r(2) r(4) 0 #555;
                    cursor: pointer;
                    opacity: 0;
                    transition: 0.4s;
                    text-align: center;
                    color: white;
                }
                .icon:hover {
                    animation-play-state: paused;
                }
                input:focus~.icon-holder>.icon {
                    animation: ani 2.2s ease-out infinite;
                }
                @keyframes ani {
                    0% {
                        opacity: 1;
                    }
                    10% {
                        transform: scale(1.2);
                        opacity: 1;
                    }
                    20% {
                        transform: scale(1);
                        opacity: 1;
                    }
                    100% {
                        transform: scale(1);
                        opacity: 1;
                    }
                }
                #movie {
                    animation-delay: 0.1s;
                }
                #eat {
                    animation-delay: 0.2s;
                }
                #coffee {
                    animation-delay: 0.3s;
                }
                #misc {
                    animation-delay: 0.4s;
                }
                input {
                    width: r(200);
                    height: r(48);
                    line-height: r(56);
                    font-size: r(25);
                    vertical-align: middle;
                    border: none;
                    padding: 0 r(6);
                    border-radius: r(28);
                    position: absolute;
                    left: r(10);
                    top: r(5);
                }
                button {
                    background-color: transparent;
                    width: r(50);
                    height: r(50);
                    position: absolute;
                    right: 0;
                }
                .search {
                    width: r(32);
                    height: r(32);
                    vertical-align: middle;
                    background-color: white;
                    color: $color;
                    position: absolute;
                    bottom: r(8);
                    right: r(15);
                }
            }
        }
    }
    section {
        position: absolute;
        width: 110%;
        padding-right: 10%;
        left: 0;
        top: r(150);
        bottom: r(144);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        .banner {
            margin-top: r(30);
            margin-left: r(21);
            margin-right: r(21);
            height: r(60);
            .banner_hua {
                font-size: r(54);
                color: $color;
                vertical-align: middle;
                margin-right: r(8);
                position: absolute;
            }
            span {
                font-size: r(30);
                line-height: r(60);
                vertical-align: middle;
                position: absolute;
                left: r(75);
            }
            .more {
                font-size: r(24);
                line-height: r(60);
                a {
                    color: black;
                }
                .toright {
                    font-size: r(24);
                    margin-left: r(6);
                    color: $color;
                }
            }
        }
    }
    footer {
        position: fixed;
        bottom: 0;
        left: 0;
        padding: r(15) 0;
        width: 100%;
        ul li {
            width: 25%;
            text-align: center;
            a {
                display: block;
                color: #000000;
                font-size: r(26);
                .my_icon {
                    color: $color;
                    font-size: r(72);
                }
            }
        }
    }
}